<template>
	<view v-if="showLookFile">
		<uni-popup
			ref="lookFileRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title">
					查看文件
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="popup-contents">
					<view
						v-for="(list, listIndex) in fileList"
						:key="listIndex"
						class="fileList"
						@tap="lookFile(list.url, list.fileType)"
					>
						<view class="df jsb ac">
							<view class="df jsb ac">
								<view class="imgShow df ac">
									<image
										:src="list.url"
										class="image"
										v-if="list.fileType === 'image'"
									></image>
									<image
										src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/tnaucezgozuvvaahwp3cfmgpj.png"
										class="image"
										v-else
									></image>
									<view>
										<view class="fileName">{{
											getFileName(list.name || list.path)
										}}</view>
										<view class="fileSize">{{
											getSize(list.size)
										}}</view>
									</view>
								</view>
								<view class="total-amount">{{
									list.totalAmount
								}}</view>
							</view>
						</view>
						<view class="df tagList">
							<view
								v-for="(tag, tagIndex) in list.tags"
								:key="tagIndex"
								class="tag"
								:class="[mate(tag)]"
								>{{ tag }}</view
							>
						</view>
					</view>
					<view class="duo"></view>
				</scroll-view>
			</view>
			<view class="bottom-button-bd df ac jse">
				<button
					class="primary-button w40 primary-cancle"
					@click="handlerCancle"
				>
					取消
				</button>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { formatSizeUnits, getFileName } from '@/common/utils'
export default {
	props: {
		showLookFile: {
			type: Boolean,
			default: false,
		},
		billInfo: {
			type: Object,
			default: () => {},
		},
	},
	components: {},
	data() {
		return {
			getFileName,
			placeholderStyle: 'color:#b2b2b2;font-size:26rpx',
			fileList: [],
		}
	},
	onReady() {},
	mounted() {},
	computed: {},
	methods: {
		mate(text) {
			let className = ''
			if (text === '他人发票') {
				className = 'trfp'
			} else if (text === '抬头不一致') {
				className = 'ttbyz'
			} else if (text === '发票逾期') {
				className = 'fpyq'
			} else if (text === '发票已使用') {
				className = 'fpysy'
			} else if (text === '验真失败') {
				className = 'yzsb'
			} else if (text === '发票重复') {
				className = 'fpcf'
			} else if (text === '非企业员工发票') {
				className = 'fqyygfp'
			} else if (text === '验真成功') {
				className = 'yzcg'
			}
			return className
		},
		openPopup() {
			this.$refs.lookFileRef.open('bottom')
		},
		closePopup() {
			this.$refs.lookFileRef.close()
			this.$emit('close')
		},
		//转换为大小
		getSize(size) {
			return formatSizeUnits(size)
		},

		//查看pdf
		lookFile(url, fileType) {
			if (fileType === 'image') {
				wx.previewImage({
					current: url, //当前的图片路径
					urls: [
						// 所有图片的URL列表，数组格式   预览图片路径
						url,
					],
					success: function (res) {
						console.log(res)
					},
				})
			} else if (fileType === 'pdf') {
				wx.downloadFile({
					url, //示例的url地址
					success: function (resinfo) {
						let path = resinfo.tempFilePath
						wx.openDocument({
							filePath: path,
							fileType: 'pdf',
							success: function (rest) {
								console.log(rest)
							},
							fail: function (error) {
								wx.showToast({
									icon: 'none',
									title: '打开文件失败',
								})
							},
						})
					},
					fail: function (err) {
						console.log('fail')
						console.log(err)
						wx.showToast({
							icon: 'none',
							title: '下载文件失败',
						})
					},
				})
			}
		},
		//取消
		handlerCancle() {
			this.formValue = {
				secondId: '',
				secondName: '',
				totalAmount: '',
				fileLength: 0,
				threeObj: {},
			}
			this.closePopup()
		},
		//获取文件
		getFileList(dataInfo) {
			let threeObj = dataInfo.threeObj
			let newFileList = []
			for (let key in threeObj) {
				newFileList = [...newFileList, ...threeObj[key].fileList]
				console.log(threeObj[key].fileList)
			}
			this.fileList = newFileList
			console.log('fileList', this.fileList, dataInfo)
		},
	},
	watch: {
		showLookFile(val) {
			if (val) {
				this.openPopup()
				this.getFileList(this.billInfo)
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 500rpx);
	display: flex;
	flex-direction: column;
	.edit {
		width: 32rpx;
		height: 32rpx;
		background: url('https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/131094/ORG/d28mo78l159n531pyrabni5zl.png?timestamp=1688471232634')
			no-repeat center/100%;
	}
	.upload {
		border-bottom: solid 1px #e5e5e5;
	}
}
.popup-contents {
	width: 100%;
	padding: 32rpx 32rpx 0 32rpx;
	flex: 1;
	height: 0;
	box-sizing: border-box;
}
.bankContet {
	position: relative;
	.emtpy {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
	}
}
.title {
	font-size: 26rpx;
	line-height: 36rpx;
	margin-bottom: 20rpx;
}
.duo {
	width: 100%;
	height: 150rpx;
}
.disable {
	opacity: 0.3;
}

.addThree {
	font-size: 24rpx;
	line-height: 24rpx;
	.add {
		padding: 10rpx 28rpx;
		background: #4095e5;
		color: #fff;
		border-radius: 5rpx;
		margin-left: 6rpx;
	}
}
.delThree {
	color: #fff;
	background: #bd3124;
	border-radius: 10rpx;
	font-size: 26rpx;
	margin: 20rpx 0;
}
.primary-cancle {
	background: #efefef;
	color: #4b4b4b;
}
.fileList {
	font-size: 26rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 10rpx 20rpx;
	.imgShow {
		padding: 20rpx 0;
		padding-right: 40rpx;
		width: 450rpx;
		.image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
		}
	}
	.fileName {
		margin-bottom: 5rpx;
	}
	.fileSize {
		font-size: 22rpx;
		color: #c5c5c7;
	}
	.delete {
		width: 32rpx;
		height: 32rpx;
		background: url('https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130846/ORG/182rbzcyd4lfc5wn12e665zik.png?timestamp=1688390969141')
			no-repeat center/100%;
	}
	.tagList {
		flex-wrap: wrap;
		border-bottom: 1px solid #f8f8f8;
	}
	.tag {
		padding: 5rpx 12rpx;
		border-radius: 5rpx;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ffa39e;
		background: #fff1f0;
	}
	.trfp {
		background: #e7f7ff;
		border: 1px solid #b1e2ff;
		color: #64aaff;
	}
	.ttbyz {
		background: #e6fffb;
		border: 1px solid #abdf98;
		color: #78cac6;
	}
	.yzcg {
		background: #f6ffed;
		border: 1px solid #b8e4fd;
		color: #81d376;
	}
	.fpyq {
		background: #fff2e8;
		border: 1px solid #ffd0b5;
		color: #fa5d39;
	}
	.fpysy {
		background: #f9f0ff;
		border: 1px solid #bbe1ff;
		color: #a28dda;
	}
	.yzsb {
		background: #fff1f0;
		border: 1px solid #ffbfbc;
		color: #f87880;
	}
	.fpcf {
		background: #f2f3fb;
		border: 1px solid #daddf4;
		color: #665ec0;
	}
	.fqyygfp {
		background: #fff0f6;
		border: 1px solid #ffc9e1;
		color: #ee67ab;
	}
}
.emptyAll {
	width: 100%;
	height: 24rpx;
}
.total-amount {
	border-left: 4rpx solid #979797;
	padding-left: 30rpx;
	font-size: 32rpx;
}
</style>
